<template>
    <!--pc底部底部-->
    <footer class="big-footer">
        <!--地图上的图片-->

        <!--版心-->
        <div class="container my_footer clearfix">
            <!--最底部第一部分-->
            <div class="tel">
                <ul>
                    <li>
                        <span class="iconfont">&#xe606</span>
                        <span>400-9016-799</span>
                    </li>
                    <li style="margin-top: 10px">
                        <span class="iconfont">&#xe677</span>
                        <span>杭州市滨江区味捷餐饮</span>
                    </li>
                    <li style="margin-top: 10px">
                        <span class="iconfont">&#xe611</span>
                        <span>PLOVELACD@163.com Hacke860@163.com</span>
                    </li>
                </ul>
            </div>

            <!--最底部第二部分-->
            <div class="email">
                <div>
                    <form action="">
                        <input type="email" placeholder="请留下您的邮箱获取更多资料">
                        <input type="submit" id="send" value="SEND">
                    </form>
                </div>
                <p>
                    <span>京ICP备11017824号-4/京ICP证130164号 </span>
                    <span>北京市公安局朝阳分局备案编号：1101050005</span>
                </p>
                <p>Copyright 2006-2017 ZCOOL</p>
            </div>

            <!--最底部第三部分-->
            <!--<div class="friends">-->
                <!--<p class="title">友情链接</p>-->
                <!--<ul class="clearfix">-->
                    <!--<li>-->
                        <!--<a href="javascript:;">快马加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">全球加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">中国加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">快马加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">全球加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">中国加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">快马加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">全球加盟网</a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">中国加盟网</a>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->

        </div>
    </footer>
</template>

<script>
    export default {
        name: "homeFooter"
    }
</script>

<style lang="less">
    /* pc端底部 */
    .big-footer {
        margin-top: 200px;
        /*margin-top: 1000px;*/
        background-color: #000000;
        position: relative;
        padding-bottom: 70px;

        #allmap {
            width: 1200px;
            height: 265px;
            background-color: pink;
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
        }

        #allmap::after {
            content: "";
            width: 562px;
            height: 210px;
            position: absolute;
            z-index: 100000000;
            top: 38px;
            right: 15px;
            margin-left: 500px;
            //background-color: red;
            background: url("../../assets/images/chanpin/mapimg.png");
            background-size: cover;
        }

        .my_footer {
            /*height: 1000px;*/
            margin: 0 auto;
            //background-color: greenyellow;
            /* 第一部分 */

            .tel {
                width: 305px;
                height: 102px;
                //background-color: aqua;
                float: left;
                margin-top: 50px;
                margin-left: 50px;

                span {
                    color: #fff;
                }

                span:nth-of-type(1) {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    background-color: #ff0000;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 30px;
                    font-size: 15px;
                }

                span:nth-of-type(2) {
                    margin-left: 18px;
                    font-size: 12px;
                }
            }

            /* 第二部分 */

            .email {
                width: 492px;
                height: 102px;
                //background-color: chocolate;
                /*margin-left: 100px;*/
                float: right;
                margin-top: 50px;

                > div {
                    position: relative;
                    margin-bottom: 15px;

                    input {
                        border: 0;
                        border: 1px solid #000;
                        width: 401px;
                        height: 41px;
                        border-radius: 10px;
                        padding-left: 26px;
                        outline: none;
                    }

                    #send {
                        border: 0;
                        width: 125px;
                        height: 42px;
                        background-color: #ff0000;
                        border-radius: 22px;
                        color: #fff;
                        font-size: 16px;
                        position: absolute;
                        text-align: center;
                        line-height: 44px;
                        right: 1px;
                        padding-right: 22px;
                        border: 1px solid #ff0000;

                        &:hover {
                            color: #ff0000;
                            background: #fff;
                            border: 1px solid #ff0000;
                        }
                    }
                }

                p {
                    font-size: 12px;
                    color: #fff;

                    &:nth-of-type(1) {
                        margin-bottom: 6px;

                        span {
                            &:nth-of-type(2) {
                                margin-left: 12px;
                            }
                        }
                    }

                    &:nth-of-type(2) {
                        text-align: right;
                    }
                }
            }

            /* 第三部分 */

            .friends {
                height: 102px;
                //background-color: darkred;
                margin-left: 57px;
                float: left;
                margin-top: 30px;
                clear: both;

                p.title {
                    font-size: 12px;
                    text-align: left;
                    //margin-top: 15px;
                    line-height: 35px;
                    color: #fff;
                }

                ul {
                    //background-color: red;
                    width: 1000px;
                    height: 100%;

                    li {
                        float: left;
                        font-size: 12px;

                        a {
                            color: #fff;
                            line-height: 25px;
                            margin-right: 25px;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
</style>
